<template>
  <div>
    <el-dialog v-model="visible" width="520px" :title="title" draggable>
      <el-form ref="formRef" :model="formData" :rules="rules" class="form-inline"
               label-position="right" label-width="120px">
        <el-form-item label="缴费类型" prop="payType">
          <el-select v-model="formData.payType" class="input_width">
            <el-option v-for="item in getEnumBySn('payType')" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收款方式" prop="payWay">
          <el-select v-model="formData.payWay" class="input_width" optop>
            <el-option v-for="item in getEnumBySn('payWay')" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收款金额" prop="payValue">
          <el-input-number v-model="formData.payValue" required
                           class="input_width"></el-input-number>
        </el-form-item>

        <el-form-item label="支出金额">
          <el-input-number v-model="formData.rebateValue" class="input_width"></el-input-number>
        </el-form-item>

        <el-form-item label="交易日期" prop="payDateTime">
          <el-date-picker type="datetime" v-model="formData.payDateTime"
                          value-format="YYYY-MM-DD HH:mm:ss"
                          placeholder="日期" style="width: 320px"/>
        </el-form-item>
        <el-form-item label="摘要" prop="roundUp">
          <el-input type="textarea" rows="5" v-model="formData.roundUp" class="input_width"   maxlength="64  "></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="()=>visible=false" style="width:45%;height: 50px; font-size: 50px;">取消</el-button>
          <el-button type="primary" @click="confirm" :loading="saveLoading" style="width:45%;height: 50px; font-size: 50px;">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>

</template>

<script lang="ts" setup>

import request from "@/config/axios";
import {getEnumBySn} from "@/api/enums";
import {FormRules} from "element-plus";

const visible = ref(false);
const title = ref("新增交易明细")
const formRef = ref({});
const formData = ref({});
const saveLoading = ref(false)

const rules = reactive({
  payType: [
    {required: true, message: "请输入缴费类型", trigger: 'blur'}
  ],
  payWay: [
    {required: true, message: "请输入收款方式", trigger: 'blur'}
  ],
  payValue: [
    {required: true, message: "请输入收款金额", trigger: 'blur'}
  ],
  payDateTime: [
    {required: true, message: "请输入交易日期", trigger: 'blur'}
  ]

})


const emit = defineEmits(['saveOk'])

const confirm = async function () {
  saveLoading.value = true
  try {
    await formRef.value?.validate();
  }catch (e) {
    saveLoading.value = false
    return
  }

  try {
    if (title.value === '新增交易明细') {
      await request.post({
        url: "/payDetail/save",
        data: formData.value
      })
      ElMessage.success("新增成功!")

    } else if (title.value === '修改交易明细') {
      await request.post({
        url: "/payDetail/updateById",
        data: formData.value
      })
      ElMessage.success("保存成功!")
    }
    visible.value = false
    emit('saveOk')
  }finally {
    saveLoading.value = false
  }



}


defineExpose({
  add: (rowData) => {
    visible.value = true
    formData.value = rowData
    title.value = "新增交易明细"
    formData.value.rebateWay = "微信"
  },
  edit: (rowData) => {
    visible.value = true
    formData.value = rowData
    title.value = "修改交易明细"
    formData.value.rebateWay = "微信"
  }
})
</script>

<style lang="scss" scoped>
.input_width {
  width: 320px;
}
</style>
